<template>
    <div>
      <div class="header1"  style="text-align: center;font-weight: 700;">
			<p>项目信息</p>
			<!-- <el-divider content-position="right"></el-divider> -->
		</div>
      <div class="content1" style="margin-top: 0;" v-loading="loading">
      						  <el-row v-if="isModifyPro" type="flex" justify="center"  align="middle" style="margin-top:3.125rem;" v-loading="loading">
      						   		<el-col :span="14">
      						   			<el-card style="background-color: #FFFFFF">
      						   				<el-row>
      						   					<el-col :span="22">
      						   						<el-form :model="proModifyForm" ref="proModifyForm" :rules="proRules"  label-position="left" style="font-weight: 700;">
      						   							<el-form-item prop="name" label="项目名称" style="margin-top: 0.625rem;">
      						   								<!-- <div > -->
      						   									<el-input v-model="proModifyForm.name" class = "modifyInPut"></el-input>
      						   								<!-- </div> -->
      						   							</el-form-item>
      						   							<el-form-item prop="detail" label="项目简介">
      						   								<!-- <div > -->
      						   									<el-input type="textarea" maxlength="200"  show-word-limit rows="7" v-model="proModifyForm.detail" class = "modifyInPut"></el-input>
      						   								<!-- </div> -->
      						   							</el-form-item>
														<el-form-item  label="图片">
															<!-- <div > -->
															
															<br>
															<el-row type="flex" align="bottom" justify="center">
																<el-col :span="16">
																	<el-image  :src="proModifyForm.picture" style=""></el-image>																<!-- </div> -->
																</el-col>
																<el-col  :span="10" :offset="1">
																	 <el-tooltip content="替换" placement="top" style="">
																		 <cutImageDialog @formData="handleUpload"  :aspectRatio="16 / 9"/>
																	 </el-tooltip>
																</el-col>
															</el-row>
															<!-- <br> -->
														</el-form-item>
      													<el-form-item prop="teacher" label="负责人">
      														<!-- <div > -->
      															<span  style="margin-left: 8%;  margin-right: 20%;width: 60%;">{{proModifyForm.leader}}</span>
      														<!-- </div> -->
      													</el-form-item>
      						   							<el-form-item prop="teacher" label="指导老师">
      						   								<!-- <div > -->
      						   									<el-input v-model="proModifyForm.teacher"  class = "modifyInPut"></el-input>
      						   								<!-- </div> -->
      						   							</el-form-item>
      						   							<el-form-item prop="type1" label="项目类型">
      						   								<!-- <div > -->
      						   									 <el-radio-group v-model="proModifyForm.type1" class = "modifyInPut">
      						   										  <el-radio label="互联网+"  @change="other=false"></el-radio>
      						   										  <el-radio label="大创"  @change="other=false"></el-radio>
      						   										  <el-radio label="挑战杯"  @change="other=false"></el-radio>
      						   										  <el-radio label="其他" @change="other=true"></el-radio>
      						   										</el-radio-group>
      						   								<!-- </div> -->
      						   							</el-form-item>
      						   							<el-form-item prop="id" label="项目类型" v-if="other">
      						   								<!-- <div > -->
      						   									<el-input v-model="proModifyForm.type2" class = "modifyInPut"></el-input> 
      						   								<!-- </div> -->
      						   							</el-form-item>
      						   							<el-form-item prop="userNum" label="成员数量">
      						   								<!-- <div > -->
      						   									<el-input v-model="proModifyForm.userNum" class = "modifyInPut"></el-input>
      						   								<!-- </div> -->
      						   							</el-form-item>
      						   							<el-form-item prop="userNum" label="成员管理">
      						   								<el-table :data="proModifyForm.members" >
      						   									<el-table-column prop="name" label="成员"></el-table-column>
      						   									<el-table-column prop="name" label="管理" width="60%">
      						   										<el-tooltip content="移除" placement="top" style="" slot-scope="scope"> 
      						   											<el-button type="danger" @click="quiteUser(scope.row.id)" class="el-icon-delete" size="mini" circle></el-button>	
      						   										</el-tooltip>
      						   									</el-table-column>
      						   									
      						   								</el-table>
      						   							</el-form-item>
      						   							<el-form-item style="text-align: center;">
      						   								<el-button  style="width: 20%;" @click="isModifyPro = !isModifyPro">取消</el-button>
      						   								<el-button  style="width: 20%;" type="success" @click="modifyPro('proModifyForm')">保存</el-button>
      						   							</el-form-item>
      						   						</el-form>
      						   					</el-col>
      						   					<el-col :span="1">
      						   						<el-button icon="el-icon-delete" type="danger" @click="deletePro"></el-button>
      						   					</el-col>
      						   				</el-row>
      						   			</el-card>
      						   		</el-col>
      							</el-row >
      						  <el-table v-else
      								:data="projectForm"
      								style="width: 100%; white-space: pre-line; "
      							 stripe
      							 border>
      								<el-table-column
      								  prop="id"
      								  label="ID"
									  sortable
      								  width="60px">
      								</el-table-column>
      							 <el-table-column
      							   prop="projectName"
								   sortable
      							   label="名称">
      							 </el-table-column>
      								<el-table-column
      								  prop="type"
      								  label="类型"
									  sortable>
      								</el-table-column>
      								<el-table-column
      								  prop="leader"
      								  label="负责人"
									  width="89"
									  sortable>
      								</el-table-column>
      							 <el-table-column
      							   prop="teacher"
      							   label="指导老师">
      							 </el-table-column>
      							 <el-table-column
      							   prop="detail"
      							   label="简介"
      							   width="350px">
      							 </el-table-column>
								 <el-table-column
								   prop=""
								   label="图片"
								   width="160px">
								   <el-image slot-scope="scope" :src="scope.row.picture"></el-image>
								 </el-table-column>
      							 <el-table-column
      							   prop="userNum"
      							   label="人数"
      							   width="60px">
      							 </el-table-column>
      							 <el-table-column
      							   prop="members"
      							   label="成员"
								   width="100px">
      							   <div slot-scope="scope">
      								   <span v-for="e in scope.row.members" :key="e" >{{e.name}}<br></span>
      							   </div>
      							 </el-table-column>
      							 <el-table-column
      							   prop="time"
      							   label="创建时间"
      							   width="140px"
								   sortable>
      							 </el-table-column>
      							 <el-table-column
      								   fixed="right"
      								   label="操作"
      								   width="50">
      								   <template slot-scope="scope">
      									   <el-tooltip content="管理" placement="top" style="">
      											<el-button type="warning" class="el-icon-s-tools" size="mini" @click="editPro(scope.row)" circle></el-button>	
      										</el-tooltip>
      									   <!-- <el-tooltip content="降低权限" placement="top">
      											<el-button type="text" size="medium" style="color: orange;">降权</el-button>
      										</el-tooltip>
      										<el-tooltip content="禁止登陆" placement="top">
      											<el-button type="danger" size="mini" class="el-icon-delete" circle></el-button>
      										</el-tooltip> -->
      								   </template>
      								 </el-table-column>
      							  </el-table>
      						  <el-row  v-if="!isModifyPro" class="">
      								<el-col :span="24" style="text-align: center;">
      									<div style="margin-top:2%;margin-bottom: 2%;;">
      									<el-pagination
      										@current-change="getProject"
      										background
      										page-size="10"
      										layout="prev, pager,next "
      										:total="total">
      									</el-pagination>
      									</div>
      								</el-col>
      						   </el-row>		
      </div>
       
    </div>
</template>

<script>
	
import cutImageDialog  from './cut.vue' 
export default {
	components: {
	  cutImageDialog
	  
	},
    props:{
    	 proForm:{
    	        type:Object 
    	    },
    },
   
    data:function () {
		var checkNum = (rule, value, callback) => {
			// 
			if (!value) {
			  return callback(new Error('人数不能为空'));
			}else if(Number.isNaN(Number(value))){
				return callback(new Error('必须为数字'));
			}if(1>value || 20<value){
				return callback(new Error('必须在1-20'));
			}if(!Number.isInteger(Number(value))){
				return callback(new Error('必须为整数'));
			}else{
				callback();
				}
		};
        
		return{
			picture:{},
			proRules:{
				name: [
						{ required: true, message: '请输入项目名称', trigger: 'blur' },
						{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					],
				detail: [
						{ required: true, message: '请输入项目简介', trigger: 'blur' },
						{ min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
					],
				userNum: [
						{required: true,  trigger: 'blur' },
						{ validator: checkNum}
					],
				teacher: [
						{ required: true, message: '请输入指导老师名称（多个逗号隔开）', trigger: 'blur' },
						{ min: 2, max: 30, message: '长度在 2 到 20 个字符', trigger: 'blur' }
					],
				type1: [
						{ required: true, message: '请输入项目类型', trigger: 'blur' },
						{ min: 2, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					]
			},
			proModifyForm:{
				detail:"",
				name:"",
				userNum:"",
				teacher:"",
				type1:"",
				type2:"",
			},
			projectForm:[],
			isModifyPro:false,
			total:10,
			loading:false,
			other:false
		}
	},
    
    
    methods:{
		handleUpload(val){
			this.picture = val
			
			
			// let res = this.text(this.$api.uploadPicProject+"?id="+this.proModifyForm.id ,val,"post" )
			// // console.log(res)
			// if (res.code === 200) {
			// 	this.$message({
			// 		message: '修改成功',
			// 		type: 'success'
			// 		});
			// // this.isModifyPro = false
			// // location.reload()
			// }else{
			// 	this.$message.erro('请求失败或者接口返回失败')
			// 	}
		},
		finish:function(){
			this.$message({
				message: '成功，保存后查看',
				type: 'success'
				});
		},
            quiteUser:function(userId){
            	this.$confirm('确认移出？', '确认信息', {
            		distinguishCancelAndClose: true,
            		confirmButtonText: '确认',
            		cancelButtonText: '取消'
            	}).then(async () => {
            		let res = await this.text(this.$api.quiteUserProject +"?id=" + this.proModifyForm.id + "&userId="+ userId)
            			
            			if (res.code === 200) {
            				this.$message({
            					message: '移除成功',
            					type: 'success'
            					});
            			this.isModifyPro = false
            			location.reload()
            			}else if(res.code == 50033){
            				this.$message.error('该用户为项目创建者');
            			}else{
            				this.$message.error('请求失败或者接口返回失败');
            			}
            	})
            },
            deletePro: function(){
            	this.$confirm('确认删除？', '确认信息', {
            		distinguishCancelAndClose: true,
            		confirmButtonText: '确认',
            		cancelButtonText: '取消'
            	}).then(async () => {
            		this.loading = true;
            		let res = await this.text(this.$api.deleteProject+"?id="+this.proModifyForm.id)
            		
            		if (res.code === 200) {
            			this.$message({
            				message: '删除成功',
            				type: 'success'
            				});
            			this.isModifyPro = false
            			location.reload();
            		}else{
            				this.$message.error('请求失败或者接口返回失败');
            		} 
            		this.loading = false;
            	});
            },
            modifyPro:  function(formName){
            	
            	 this.$refs[formName].validate( (valid) => {
            		  if (valid) {
            			  this.$confirm('确认保存？', '确认信息', {
            			  	distinguishCancelAndClose: true,
            			  	confirmButtonText: '确认',
            			  	cancelButtonText: '取消'
            			  }).then(async () => {
            				  this.loading = true;
							  
							  this.text(this.$api.uploadPicProject+"?id="+this.proModifyForm.id ,this.picture,"post" )
							 
            					if(this.proModifyForm.typ1 === '其他'){
            						this.proModifyForm.typ1 = this.proModifyForm.typ2
            					}
            					let postData = {
            						"id":this.proModifyForm.id,
            						"name":this.proModifyForm.name,
            						"introduce":this.proModifyForm.detail,
            						"instructor":this.proModifyForm.teacher,
            						"type":this.proModifyForm.type1,
            						"userNum":this.proModifyForm.userNum
            					}
            					let res = await this.text(this.$api.modifyProject,postData,"post")
            					
            					if (res.code === 200) {
            						this.$message({
            							message: '修改成功',
            							type: 'success'
            							});
            					this.isModifyPro = false
            					location.reload();
            					}else{
            							this.$message.error('请求失败或者接口返回失败');
            					}
            					this.loading = false;
            				})
            		  } else {
            			this.$message.error('请输入数据');
            			return false;
            		  }
            	})
            },
            editPro:function(n){
            	this.isModifyPro = true
            	
            	this.proModifyForm = {
            		"id":n.id,
            		"name":n.projectName,
            		"detail":n.detail,
            		"teacher":n.teacher,
            		"type1":n.type,
            		"type2":n.type,
            		"userNum":n.userNum,
            		members:n.members,
            		leader:n.leader,
					picture:n.picture
            	}
            },
            getProject:async function(n){
            	this.loading = true;
            	let res = await this.text("project/getNum","","get")
            		
            		if (res.code === 200) {
            			this.total = res.data.num
            			
            		}else{
            			this.$message.error('请求失败或者接口返回失败');
            		}
            	this.projectForm.length = 0;
            	this.projectForm.push()
            	let b = (n-1) * 10
            	let e = n * 10
            	res = await this.text(this.$api.showManyProject+"?page="+b+"&num="+e)
            	
            	if (res.code === 200) {
            		let _this =this
            		res.data.forEach(e => {
            			this.projectForm.push({
            				picture: this.$api.picTemplate+e.project.picture,
            				leader:e.project.leader.name,
            				members:e.members,
            				detail:e.project.introduce,
            				projectName:e.project.name,
            				userNum:e.project.userNum,
            				teacher:e.project.instructor,
            				type:e.project.type,
            				id:e.project.id,
            				time: this.$dateFormat(e.project.createTime)  
            			})
            		});
            	}else{
            		this.$message.error('请求失败或者接口返回失败');
            	} 
            	this.loading = false;
            		 
            	
            },
        
    },
	created() {
		if(!this.$GLOBAL.isAdmin){
					this.$router.push("login")
					this.$message.error('用户权限不足');
				}else{
					
					this.getProject(1)
				}
	}
}
</script>

<style scoped>
  @import url("../assets/style/admin.css");
</style>